<template>
  <view class="formBox">
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="top"
      label-width="150"
    >
      <template v-if="type === 'add'">
        <uni-forms-item label="类型" required name="itemType">
          <uni-data-select
            placeholder="请选择"
            :localdata="itemType"
            v-model="formData.itemType"
          />
        </uni-forms-item>
        <uni-forms-item label="物品名称" required name="itemName">
          <uni-easyinput v-model="formData.itemName" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="数量" required name="itemNum">
          <uni-easyinput v-model="formData.itemNum" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="备注" name="itemRemark">
          <uni-easyinput v-model="formData.itemRemark" placeholder="请输入" />
        </uni-forms-item>
      </template>
      <template v-if="type === 'init'">
        <uni-forms-item
          label="选择配置标准"
          required
          name="roomConfigStandardId"
        >
          <uni-data-select
            placeholder="请选择"
            :localdata="cData"
            v-model="formData.roomConfigStandardId"
          />
        </uni-forms-item>
      </template>
    </uni-forms>
    <button class="btn" type="primary" @click="onSubmit('valiForm')">
      提交
    </button>
  </view>
</template>

<script>
import { getRoomConfigList } from '@/api/room';
import useAppStore from '@/store/modules/app';
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      itemType: [
        {
          label: '个人',
          text: '个人',
          value: '1',
        },
        {
          label: '公用',
          text: '公用',
          value: '2',
        },
      ],
      cData: [],
      // 表单数据
      formData: {},
      // 规则
      rules: {
        itemNum: {
          rules: [
            {
              required: true,
              errorMessage: '请输入内容',
            },
          ],
        },
        itemName: {
          rules: [
            {
              required: true,
              errorMessage: '请输入内容',
            },
          ],
        },
        itemType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        roomConfigStandardId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
      },
      // store
      appStore: useAppStore(),
    };
  },
  watch: {
    'formData.date': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  created() {
    // 数据合并
    this.formData = Object.assign({}, this.formData, this.data);
    // 获取数据
    this.initData();
  },
  methods: {
    // 初始数据
    initData() {
      getRoomConfigList().then((res) => {
        this.cData = res.data.map((item) => {
          return {
            ...item,
            label: item.roomConfigStandard,
            text: item.roomConfigStandard,
            value: item.roomConfigStandardId,
          };
        });
      });
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$emit('callback', res);
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  max-height: 70vh;
  padding: 60rpx 48rpx 100rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  overflow: auto;
  .uni-forms {
    min-height: 38vh;
  }
}
</style>
